import React, { PureComponent } from 'react';
import { Tree, Spin, Input } from 'antd';
import styles from './UnitDepartment.less';

const { TreeNode } = Tree;
const { Search } = Input;

export default class Index extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            unit_name: '',
            selectedKeys: [`unit_${props.currentId}`]
        }
    }

    componentDidMount() {

    }

    loadData = (treeNode) => {
        const { data = [] } = this.state;

        return new Promise(resolve => {
            if (treeNode.props.children) {
                resolve();
                return;
            }
            // const { eventKey } = treeNode.props;
            // const newData = data.map(item => {
            //     if (item.id + '' === eventKey.split('_')[1]) {
            //         return { ...item, children: departments };
            //     } else {
            //         return { ...item };
            //     }
            // })
            // this.setState({ data: newData });
            resolve();
        });
    }

    onSelect = (selectedKeys, info) => {
        const { onTreeSelect } = this.props;

        this.setState({ selectedKeys });
        if (typeof onTreeSelect === 'function') {
            const { node = {} } = info;
            const { eventKey, title, nodeType } = node.props;

            if (info.selected) {
                const array = eventKey.split('_')
                onTreeSelect(parseInt(array[array.length - 1]), title, nodeType);
            } else {
                onTreeSelect(undefined, undefined, nodeType);
            }
        }
    }

    render() {
        const { unit_name, selectedKeys } = this.state;
        const { hasChild, loading, units = [] } = this.props;

        return (
            <div className={styles.tree_wrapper}>
                <Spin spinning={loading}>
                    <div style={{ height: '100%' }}>
                        <div style={{ padding: 16 }}>
                            <Search placeholder='单位名称' onSearch={value => this.setState({ unit_name: value })} />
                        </div>
                        <div className={styles.tree}>
                            <Tree
                                loadData={this.loadData}
                                selectedKeys={selectedKeys}
                                onSelect={this.onSelect}
                            >
                                {units && units.filter(item => !unit_name || (item.unit_name && item.unit_name.indexOf(unit_name) !== -1)).map(item => {
                                    return (
                                        <TreeNode key={`unit_${item.id}`} title={item.unit_name} isLeaf={!hasChild} nodeType='unit'>
                                            {item.children && item.children.map(child => {
                                                return (
                                                    <TreeNode key={`unit_${item.id}_department_${child.id}`} title={child.dept_name} isLeaf={true} nodeType='department' />
                                                );
                                            })}
                                        </TreeNode>
                                    );
                                })}
                            </Tree>
                        </div>
                    </div>
                </Spin>
            </div>
        );
    }
}